<template>
<div>
    <div class="pos">
        <el-form :model="ruleForm2" :rules="rules" ref="ruleForm2" label-width="100px" class="demo-ruleForm">

            <el-form-item label="用户名" prop="username">
                <el-col :span="24">
                    <el-input v-model="ruleForm2.username"></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="密码" prop="pass">
                <el-col :span="24">
                    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off" show-password></el-input>
                </el-col>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" round @click="submitForm2('ruleForm2')">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</template>

<script scoped>
import Qs from 'qs'
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    //this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        return {
            ruleForm2: {
                username: '',
                pass: '',
            },
            rules: {
                username: [{
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 12,
                        message: "长度在 1 到 12 个字符",
                        trigger: "blur"
                    }
                ],
                pass: [{
                    required: true,
                    trigger: 'blur'
                }]
            }
        };
    },
    methods: {
        submitForm2(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //当前登录用户信息
                    localStorage.setItem('userinfo',JSON.stringify(this.ruleForm2))
                    let userinfo=JSON.parse(localStorage.getItem('userinfo'))
                    this.$store.commit('SAVE_USERINFO',userinfo)

                    //this.$router.push('./page')
                    this.$store.state.show.status=true,
                    //  this.$router.replace('/components/menu');
                    this.$axios({
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        method: 'post',
                        transformRequest: [function (data) {
                        // 对 data 进行任意转换处理        
                            return Qs.stringify(data)
                        }],
                        url: "./action/login_server",
                        data: this.ruleForm2

                    }).then((res) => {
                        if (res.data == '2') {
                            alert("没有此帐号");
                        } else if (res.data == '1') {
                            alert("密码错误");
                        } else {
                            alert("登陆成功");
                           this.$router.push('./page')
                        }
                    });
                } else {
                    Console.log('error submit!!');
                    return false;
                }
            })
        },
    }
}
</script>

<style scoped>
.pos {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}

input {
    display: block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    margin-bottom: 10px;
    outline: none;
    border: 1px solid #888;
    padding: 10px;
    box-sizing: border-box;
}

button {
    display: block;
    width: 250px;
}

span {
    cursor: pointer;
}

span:hover {
    color: #41b883;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}
.el-form{
  border: #333 2px solid;
  width: 400px;
  border-radius: 4px;
  padding: 40px 40px;
  margin: 0 auto;
}
</style>
